<template>
  <!-- 图标选择器组件，目前只添加iconfont,后续可优化完善兼容el-icon,fa等 -->
  <el-popover trigger="focus" :hide-after="0" :width="selectorWidth" :visible="popoverVisible">
    <div class="icon-selector-box" @mouseover.stop="iconSelectorMouseover = true" @mouseout.stop="iconSelectorMouseover = false">
      <div class="icon-selector-header">
        <span>请选择图标</span>
      </div>
      <div class="icon-selector-content">
        <el-scrollbar max-height="200px">
          <div class="inner-selector-content">
            <div v-for="(item,index) in iconList" :key="index" class="icon-selector-item" @click="chooseIcon(item)">
              <Icon :name="item"></Icon>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <template #reference>
      <el-input
          v-model="currentIcon"
          @focus="onInputFocus"
          @blur="onInputBlur"
          :readonly="true"
          ref="selectorInput"
          clearable
      >
        <template #prepend>
          <div class="icon-prepend">
            <Icon :name="currentIcon"></Icon>
          </div>
        </template>
        <template #append>
          <el-button @click="onInputRefresh" :icon="RefreshLeft"></el-button>
        </template>
      </el-input>
    </template>
  </el-popover>
</template>

<script setup>
  import {getIconfontNames} from "@/utils/icon";
  import Icon from '@/components/ruifoxIcon/Icon'
  import { ref, onMounted, nextTick, watch } from 'vue'
  import { useEventListener } from '@vueuse/core'
  import { RefreshLeft } from '@element-plus/icons-vue';
  const iconList = ref([])
  const props = defineProps({
    currentIcon: {
      type: String,
      default: ''
    }
  })
  const emit = defineEmits(['update:currentIcon'])
  const currentIcon = ref(props.currentIcon)
  watch(props,newVal => {
    currentIcon.value = newVal.currentIcon
  })
  const popoverVisible = ref(false)
  const inputFocus = ref(false)
  const selectorInput = ref()
  const iconSelectorMouseover = ref(false)
  const selectorWidth = ref(0)
  getIconfontNames().then((res) => {
    iconList.value = res
  })
  const chooseIcon = (name) => {
    currentIcon.value = name
    emit('update:currentIcon', currentIcon.value)
    iconSelectorMouseover.value = popoverVisible.value = false
    nextTick(() => {
      selectorInput.value.blur()
    })
  }
  const onInputFocus = () => {
    inputFocus.value = popoverVisible.value = true
  }
  const onInputBlur = () => {
    inputFocus.value = false
    popoverVisible.value  = iconSelectorMouseover.value
  }
  const onInputRefresh = () => {
    currentIcon.value = ''
    emit('update:currentIcon', currentIcon.value)
  }
  const checkPopoverVisible = () => {
    popoverVisible.value = inputFocus.value || iconSelectorMouseover.value ? true : false
  }
  // 获取 input 的宽度
  const getInputWidth = () => {
    nextTick(() => {
      selectorWidth.value = selectorInput.value.$el.offsetWidth < 260 ? 260 : selectorInput.value.$el.offsetWidth
    })
  }
  onMounted(() => {
    getInputWidth()
    useEventListener(document, 'click', checkPopoverVisible)
  })
</script>

<style scoped lang="scss">
  .icon-selector-box{
    .icon-selector-header{
      display: flex;
      align-items: center;
      height: 30px;
    }
    .icon-selector-content{
      width: 100%;
      .inner-selector-content{
        display: flex;
        flex-wrap: wrap;
        .icon-selector-item{
          display: flex;
          height: 35px;
          width: 35px;
          border: 1px solid transparent;
          align-items: center;
          justify-content: center;
          margin-bottom: 3px;
          cursor: pointer;
          &:hover{
            border-color: $mainColor;
          }
        }
      }
    }
  }
  ::v-deep(.el-input) input{
    user-select: none;
  }
</style>
